<!--
@description    考核指标管理 html 模板
@author         秦俊强
@email          458112865@qq.com
@create         2020-03-12 21:50
-->

<div class="ant-card ant-card-body">

  <!-- 全局 loading -->
  <div></div>



  <!-- 1. 菜单&操作区 start -->
  <div class="main-box">
    <!-- 所属部门菜单 start -->
    <div class="menu-box">
      <a-radio-group buttonStyle="solid" :value="orgTypes.value.code" @change="changeOrg">
        <a-radio-button v-for="org in orgTypes.arr" :value="org.code">
          <span>{{ org.name }}</span>
        </a-radio-button>
      </a-radio-group>
    </div>
    <!-- 所属部门菜单 end -->

    <!-- 功能按钮 start -->
    <div class="btn-box">
      <a-button v-if="!isDraggable" :disabled="loading"
                @click="switchDraggableType()">自定义排序</a-button>

      <a-button v-if="isDraggable" :disabled="loading"
                @click="switchDraggableType()">取消</a-button>
      <a-button v-if="isDraggable" :disabled="loading"
                type="primary" @click="saveOrderTree()">保存排序</a-button>

      <!-- TODO 导入导出 -->
      <!--<a-button-group>
        <a-button icon="cloud-download" title="导入指标文件" />
        <a-button icon="cloud-upload" title="导出到本地" />
      </a-button-group>-->
    </div>
    <!-- 功能按钮 end -->
  </div>
  <!-- 1. 菜单&操作区 end -->


  <!-- 2. 提示文字 start -->
  <div class="tip-box">
    <a-alert :message="getMessage()" type="warning" showIcon />
  </div>
  <!-- 2. 提示文字 start -->


  <!-- 3. 内容区 start -->
  <div class="container-box">
    <a-row type="flex" v-if="!isDraggable">

      <!-- 左边树 start -->
      <a-col :span="11" class="tree-box">
        <a-tree v-if="treeData[0]"
                :treeData="treeData"
                :defaultExpandedKeys="[treeData[0].code]"
                @select="selected">

          <!-- indexGroup 根目录 start -->
          <template slot="indexGroup" slot-scope="item">
            <div class="title" style="font-weight: bold;">
              <span>{{ item.title }}（{{ item.childrenLen || 0 }}）</span>
            </div>

            <!-- 编辑图标按钮 start 根目录只能添加 -->
            <div class="icon-box">
              <span title="添加指标">
                <a-icon class="add" type="plus"
                        @click.stop="showAddIndex(item)" />
              </span>
            </div>
            <!-- 编辑图标按钮 end -->
          </template>
          <!-- indexGroup 根目录 end -->

          <!-- index 指标项 start -->
          <template slot="index" slot-scope="item">
            <div class="title">
              <span :title="getTitleSize(item, true)">{{ getTitleSize(item) }}</span>
            </div>

            <!-- 编辑图标按钮 start -->
            <div class="icon-box">
              <span title="添加指标">
                <a-icon class="add" type="plus"
                        @click.stop="showAddIndex(item)" />
              </span>

              <span title="删除指标">
                <a-icon class="del" type="delete"
                        @click.stop="showDeleteConfirm(item)" />
              </span>
            </div>
            <!-- 编辑图标按钮 end -->
          </template>
          <!-- index 指标项 end -->

          <!-- indexValue 指标值 start 叶子节点只能删除 -->
          <template slot="indexValue" slot-scope="item">
            <a-icon class="file" type="file" />

            <div class="title">
              <span :title="getTitleSize(item, true)">{{ getTitleSize(item) }}</span>
            </div>

            <!-- 编辑图标按钮 start -->
            <div class="icon-box">
              <span title="删除指标">
                <a-icon class="del" type="delete"
                        @click.stop="showDeleteConfirm(item)" />
              </span>
            </div>
            <!-- 编辑图标按钮 end -->
          </template>
          <!-- indexValue 指标值 end -->
        </a-tree>
      </a-col>
      <!-- 左边树 end -->

      <!-- 中间 start -->
      <a-col :span="1"></a-col>
      <!-- 中间 end -->

      <!-- 右边表单编辑详细 start -->
      <a-col :span="12" class="form-box">
        <div class="empty-box" v-if="!selectedTree.key">
          <div><a-icon type="message" /> 当前未选中指标项</div>
        </div>

        <div v-else>
          <a-form v-if="!loading && attrsDetail.edit">
            <!-- 固定表单 start -->
            <a-form-item label="指标名称" v-bind="formLayout.auto">
              <a-input v-model="selectedTree.editTitle" placeholder="请输入指标名称" />
            </a-form-item>

            <a-form-item label="指标编码" v-bind="formLayout.auto">
              <a-input v-model="selectedTree.code" disabled />
            </a-form-item>
            <!-- 固定表单 end -->

            <!-- 动态渲染属性表单 start -->
            <div v-for="(item, ind) in getAttrs()">

              <!-- 加载中展示 start -->
              <div v-if="loading">
                <a-form-item v-if="item.attrOptions.length === 0"
                             v-bind="formLayout.auto" :label="item.attrName">
                  <a-input disabled />
                </a-form-item>

                <a-form-item v-else :label="item.attrName" v-bind="formLayout.auto">
                  <a-select disabled></a-select>
                </a-form-item>
              </div>
              <!-- 加载中展示 end -->

              <!-- 加载完成显示 start -->
              <div v-else>
                <!-- 可输入项 -->
                <a-form-item v-if="item.attrOptions.length === 0"
                             v-bind="formLayout.auto" :label="item.attrName">
                  <a-input v-model="attrsDetail.edit[item.attrCode].attrValue" />
                </a-form-item>

                <!-- 下拉项 -->
                <a-form-item v-else :label="item.attrName" v-bind="formLayout.auto">
                  <a-select v-model="attrsDetail.edit[item.attrCode].attrValue">
                    <a-select-option v-for="opt in item.attrOptions" :value="opt.attrValue">
                      <span>{{ opt.attrName }}</span>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </div>
              <!-- 加载完成显示 end -->
            </div>
            <!-- 动态渲染属性表单 end -->

            <!-- 底部保存按钮 -->
            <a-form-item v-bind="formLayout.tail">
              <a-button v-if="isDisabled()" type="primary" disabled>保存数据</a-button>
              <a-button v-else type="primary" @click="saveAttr()">保存数据</a-button>

              <a-button v-if="isDisabled()" disabled>重置</a-button>
              <a-button v-else @click="updateAttrDetail('cancel')">重置</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
      <!-- 右边表单编辑详细 end -->
    </a-row>

    <!-- 排序显示 -->
    <a-row type="flex" v-else>
      <a-col :span="24" class="tree-box">
        <a-tree :treeData="dropTreeData" draggable @drop="onDrop"></a-tree>
      </a-col>
    </a-row>
  </div>
  <!-- 3. 内容区 end -->



  <!-- 弹窗编辑 start -->
  <a-modal v-model="modalInfo.show" :title="modalInfo.title"
           :width="'500px'" :maskClosable="false" @ok="addTreeNode">
    <AddTreeNode :selectTree="treeData" ref="addNode"
                 :autoKey="modalInfo.autoKey"></AddTreeNode>
  </a-modal>
  <!-- 弹窗编辑 end -->
</div>
